<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <header class="col-md-2">
        <div class="logo">
          <a href="#">
            <img src="./images/logo.png" alt="" class="d-none d-sm-block">
            <span class="d-block d-sm-none">阿里百秀</span>
          </a>
        </div>
        <div class="left-nav clearfix">
          <ul>
            <li><a href="#"><i class="bi bi-camera-fill"></i>生活馆</a></li>
            <li><a href="#"><i class="bi bi-image-fill"></i>自然汇</a></li>
            <li><a href="#"><i class="bi bi-motherboard-fill"></i>科技潮</a></li>
            <li><a href="#"><i class="bi bi-ear-fill"></i>奇趣事</a></li>
            <li><a href="#"><i class="bi bi-egg-fried"></i>美食杰</a></li>
          </ul>
        </div>
      </header>
      <article class="col-md-7">
        <div class="news clearfix">
          <ul>
            <li>
              <a href="#">
                <img src="./upload/lg.png" alt="阿里百秀">
                <p>阿里百秀</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/1.jpg" alt="人">
                <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/2.jpg" alt="山">
                <p>惊！某地山卡拉里发现神秘古遗迹</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/3.png" alt="美女">
                <p>美女嗔怒也非常好看啊</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./upload/4.png" alt="帅哥">
                <p>少年领域展开</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="publish">
          <div class="row">
            <div class="col-sm-9">
              <h6>深度科普：怎么确定地球在自转？这几种现象在生活中随处可见！</h6>
              <p class="text-muted d-none d-sm-block">albx 发布于 2025-09-01</p>
              <p class="text d-none d-sm-block">我们生活的地球，就像一个永不停歇的 “超级陀螺”，在浩瀚宇宙中一刻不停地运动着。它不仅以每小时约 1670 千米的速度在自转，还以每秒约 30
                千米的速度围绕太阳公转。</p>
              <p class="text-muted">华声在线 的报道 • 6 天 • 阅读时长4 分钟</p>
            </div>
            <div class="col-sm-3 pic d-none d-sm-block">
              <img src="./upload/n1.jpg" alt="地球自转示意图">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              <h6>人有没有肝病，走路就能知道？有肝病的人，走路时常有这3个表现</h6>
              <p class="text-muted d-none d-sm-block">albx 发布于 2025-09-05</p>
              <p class="text d-none d-sm-block">古人讲“肝者，将军之官，谋虑出焉”，意思是肝脏像个主帅，指挥全身。守住它，就是守住你的健康底线。</p>
              <p class="text-muted">华声在线 的报道 • 1 天 • 阅读时长2 分钟</p>
            </div>
            <div class="col-sm-3 pic d-none d-sm-block">
              <img src="./upload/n2.jpg" alt="肝脏健康示意图">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              <h6>小白龙风光无限，却被片场狠打住院，如今开卤肉店谋生</h6>
              <p class="text-muted d-none d-sm-block">albx 发布于 2025-09-02</p>
              <p class="text d-none d-sm-block">
                王伯昭演的小白龙，曾经是多少人心里的白马王子！剑眉星目，风度翩翩，1986年《西游记》一播出，他瞬间成了家喻户晓的大明星。谁能想到，这位风光无限的演员，后来却因为片场被“故意”打伤，事业和生活都跌进了谷底。
              </p>
              <p class="text-muted">北京时间 的报道 • 3 天 • 阅读时长1 分钟</p>
            </div>
            <div class="col-sm-3 pic d-none d-sm-block">
              <img src="./upload/n3.jpg" alt="小白龙剧照">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              <h6>梅西赛后告别：以这样的方式结束在阿根廷的比赛 是我一直以来的梦想</h6>
              <p class="text-muted d-none d-sm-block">albx 发布于 2025-09-06</p>
              <p class="text d-none d-sm-block">
                在北京时间9月5日上午结束的南美区世预赛第17轮比赛中，阿根廷队坐镇主场，以3-0的比分完胜委内瑞拉队。此役，梅西状态神勇，上演梅开二度的好戏。而在这场比赛结束后，梅西正式确认，这是他职业生涯里的最后一场本土世界杯预选赛。
              </p>
              <p class="text-muted">爱奇艺体育 的报道 • 7 小时</p>
            </div>
            <div class="col-sm-3 pic d-none d-sm-block">
              <img src="./upload/n4.png" alt="梅西比赛照片">
            </div>
          </div>
        </div>
      </article>
      <aside class="col-md-3">
        <a href="#" class="banner">
          <img src="./upload/zgboke.jpg" alt="">
        </a>
        <a href="#" class="hot">
          <span class="btn btn-primary">热搜</span>
          <h6 class="text-primary">欢迎加入中国博客联盟</h6>
          <p>这里收录国内各个邻域的优秀博客，是一个全人工编辑的开放式2博客联盟交流和展示平台</p>
        </a>
      </aside>
    </div>
  </div>
</body>

</html>